<script setup lang="ts">
import type { FormRules } from 'element-plus'
import { clearCookies, encrypt } from '@/utils'
import { EMAIL, INDUSTRYS, PASSWORD } from '@/constants'


const router = useRouter()
function toLogin() {
  router.push('/login')
}
const formRef = ref(null)
const authPhoneRef = ref(null)
const loading = ref(false)
const isCompleted = ref(false)
const form = reactive({
  name: '',
  email: '',
  phone: '',
  code: '',
  password: '',
  checkPass: '',
  customerManager: '',
  company: '',
  industry: '',
  proxyUrl: '',
})
function validatePass(rule, value, callback) {
  if (value === '') {
    callback(new Error('请输入密码'))
  }
  else {
    if (form.checkPass !== '')
      formRef.value.validateField('checkPass')

    callback()
  }
}
function validatePass2(rule, value, callback) {
  if (value === '')
    callback(new Error('请再次输入密码'))

  else if (value !== form.password)
    callback(new Error('两次输入密码不一致!'))

  else
    callback()
}
const formRules = reactive<FormRules>({
  name: [
    { required: true, message: '请输入账户名', trigger: 'blur' },
    /* 字母数字下划线，不能有中文 */
    { pattern: /^[/\w]+$/, message: '账户名只能包含字母数字下划线', trigger: 'blur' },
  ],
  company: [
    { required: true, message: '请输入公司名', trigger: 'blur' },
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { pattern: EMAIL, message: '邮箱格式错误', trigger: ['blur'] },
  ],
  password: [
    { required: true, validator: validatePass, trigger: 'blur' },
    { pattern: PASSWORD, message: '长度至少为6位，大写/小写字母、数字、特殊字符', trigger: ['blur'] },
  ],
  checkPass: [
    { required: true, validator: validatePass2, trigger: 'blur' },
  ],
  customerManager: [
    { required: true, message: '输入客户经理名字', trigger: ['blur'] },
  ],
})

clearCookies()
// 收集主机
form.proxyUrl = location.host

/** 提交注册 */
function confirm() {
  const { email: accountEmail } = form
  if (accountEmail)
    useRequest('VerifyRepetition', { accountEmail })
  authPhoneRef.value?.checkPhoneCode().then(async ({ phone, code }) => {
    if (code && phone) {
      form.code = code
      form.phone = phone
      loading.value = true
      const newForm = { ...form, password: encrypt(form.password) }
      const result = await useRequest('RegisterAccount', newForm) as any
      if (result.success) {
        isCompleted.value = true
        ElNotification.success('注册成功')
      }
      loading.value = false
    }
  })
}
</script>

<template>
  <div class="h-full flex-center">
    <div v-if="isCompleted" class="text-center space-y-2">
      <p class="text-green-500">
        账户注册成功!
      </p>
      <p class="tips">
        请用账户名: <el-text type="primary" class="mx-1">
          {{ form.name }}
        </el-text>或手机号: <el-text type="primary" class="mx-1">
          {{ form.phone }}
        </el-text>登录
      </p>
      <div>
        <el-button class="btn-submit" type="primary" @click="toLogin">
          立即登录
        </el-button>
      </div>
    </div>
    <div v-else class="w-120 p-10">
      <div class="mx-auto mb-4 text-center text-xl font-bold">
        注册账号
      </div>
      <el-form ref="formRef" :model="form" label-position="left" label-width="100px" :rules="formRules" clear-validate>
        <el-form-item label="账户名" prop="name">
          <el-input v-model="form.name" placeholder="请输入账户名" autocomplete="off" />
        </el-form-item>
        <el-form-item label="公司名" prop="company">
          <el-input v-model="form.company" placeholder="请输入公司名" autocomplete="off" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.email" placeholder="请输入邮箱" autocomplete="off" />
        </el-form-item>
        <AuthPhone ref="authPhoneRef" />
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" type="password" placeholder="请输入密码" autocomplete="off" />
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input v-model="form.checkPass" type="password" placeholder="请输入确认密码" autocomplete="off" />
        </el-form-item>
        <el-form-item label="行业">
          <el-select v-model="form.industry" placeholder="请输入所属行业">
            <el-option
              v-for="item in INDUSTRYS"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="客户经理" prop="customerManager">
          <el-input v-model="form.customerManager" placeholder="请输入客户经理名字，没有填无" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="margin-left:30px" :loading="loading" @click="confirm()">
            同意协议并注册
          </el-button>
        </el-form-item>
        <!-- <div class="protocals"> -->
        <!-- <a @click="openProtocol()" class="protocal">《犀思云客户注册协议》</a>
            <a @click="openAppProtocol()" class="protocal">《SIAS客户注册协议》</a> -->
        <!-- </div> -->
        <div class="flex-center gap-2 text-sm">
          已有账号? <el-link type="primary" @click="toLogin">
            直接登录
          </el-link>
        </div>
      </el-form>
    </div>
  </div>
</template>
